<template>
  <div class="home">
    <router-view></router-view>
    <!-- 搜索 -->
    <div class="home-header">
      <div class="header_img">
        <van-image
          width="36"
          height="28"
          src="https://img.youpin.mi-img.com/static/weex_images/v1/m/navi_title_v6.png"
        />
      </div>
      <div class="search-box">
        <van-search
          v-model="value"
          shape="round"
          placeholder="搜一搜"
          @click="$router.push({ path: '/Search' })"
        />
      </div>
    </div>
    <!-- 轮播 -->
    <div class="home_swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in data1.home_banner" :key="item.id"
          ><img :src="item.url" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航栏 -->
    <div class="home_grid">
      <van-grid :column-num="5">
        <van-grid-item
          v-for="item in data1.home_nav"
          :key="item.id"
          :icon="item.icon"
          :text="item.name"
        />
      </van-grid>
    </div>
    <!-- 众筹 -->
    <div class="home_raise">
      <div class="home_raise1">
        <van-panel title="小米有品众筹" status="8款众筹中>">
          <div class="content_box">
            <div class="left_box">
              <div class="left_topbox">
                <div class="topbox_title">
                  <span>{{ jingxuan_1.title }}</span>
                </div>
                <div class="topbox_price">
                  <span> ¥199 </span>
                </div>
              </div>
              <div class="left_bottombox">
                <img :src="jingxuan_1.url" alt="" />
              </div>
              <div class="bottom_box">
                <span>147人支持</span>
              </div>
            </div>
            <div class="right_box">
              <div class="right_box1">
                <img :src="jingxuan_2.url" alt="" />
                <p>{{ jingxuan_2.title }}</p>
                <p>{{ "¥" + jingxuan_2.price }}</p>
              </div>
              <div class="right_box1">
                <img :src="jingxuan_3.url" alt="" />
                <p>{{ jingxuan_3.title }}</p>
                <p>{{ "¥" + jingxuan_3.price }}</p>
              </div>
            </div>
          </div>
        </van-panel>
      </div>
    </div>
    <!-- 上新精选 -->
    <div class="home_new">
      <div class="home_new_raise1">
        `
        <div class="home_new_title">上新精选</div>
        <div class="content_box">
          <div
            class="content_box_item"
            v-for="item in data1.home_news"
            :key="item.id"
            @click="$router.push({ path: `/details/${item.id}` })"
          >
            <img :src="item.url" alt="" >
            <span>{{item.dsec}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 有品秒杀 -->
    <div class="home_new">
      <div class="home_new_raise1">
        <div class="home_new_title">有品秒杀</div>
        <div class="content_box">
          <div
            class="content_box_item"
            v-for="item in data1.home_youpin"
            :key="item.id"
          >
            <img :src="item.url" alt="" />
            <span>{{ item.title }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- div -->`
    <div class="bottom_box"></div>
  </div>
</template>

<script>
// import {aaaa} from "@/api"  //导入数据
import { home } from "@/api";
// import {home_nav} from "@/api"

export default {
  name: "Home",
  async created() {
    let { data } = await home();
    this.data1 = data;
    console.log(this.data1);
    console.log(this.data1.home_banner);
    this.jingxuan_1 = this.data1.home_content[0];
    this.jingxuan_2 = this.data1.home_content[1];
    this.jingxuan_3 = this.data1.home_content[2];

    // let data1 = await home_nav();
    // console.log(data1);
  },
  data() {
    return {
      value: "",
      data1: [],
      jingxuan_1: [],
      jingxuan_2: [],
      jingxuan_3: [],
    };
  },
  components: {},
  methods: {
    fn() {
      this.$router.push("/Search");
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background-color: rgb(244, 244, 244);
  .img {
    width: 100%;
  }
  .home-header {
    border: 0px solid black;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    background-color: rgb(132, 93, 50);
    padding-top: 0px;
    .header_img {
      .van-image {
        margin-top: 15px;
        margin-left: 12px;
      }
    }
    .search-box {
      width: 100%;
      .van-search {
        height: 56px;
        background-color: rgb(132, 93, 50);
      }
    }
  }
  .home_swipe {
    width: 100%;
    height: 160px;
    .van-swipe {
      width: 100%;
      height: 160px;
      img {
        width: 100%;
        height: 100%;
      }
      /deep/.van-swipe__indicators {
        left: 80%;
        align-items: flex-end;
        .van-swipe__indicator--active {
          height: 20px;
        }
        .van-swipe__indicator {
          border-radius: 0;
        }
      }
      .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
      }
    }
  }
  .home_grid {
    .van-grid-item {
      height: 82px;
    }
    /deep/.van-grid-item__content {
      background-color: rgb(244, 244, 244);
      .van-grid-item__icon {
        font-size: 54px;
        background-color: rgb(244, 244, 244);
      }
    }
  }
  .home_raise {
    height: 169px;
    // overflow: hidden;
    .home_raise1 {
      height: 159px;
      width: 94%;
      margin-left: 12px;
      background-color: rgb(255, 255, 255);
      margin-bottom: 10px;
      border-radius: 6px;
      .left_box {
        display: flex;
        flex-wrap: wrap;
        .left_topbox {
          height: 86px;
          .topbox_title {
            width: 86px;
            height: 36px;
            padding-left: 8px;
            box-sizing: border-box;
            padding-top: 3px;
            span {
              font-size: 12px;
              line-height: 15px;
            }
          }
          .topbox_price {
            width: 86px;
            height: 50px;
            padding-left: 8px;
            box-sizing: border-box;
            padding-top: 3px;
            span {
              line-height: 50px;
            }
          }
        }
        .left_bottombox {
          width: 76px;
          height: 76px;
          img {
            width: 100%;
          }
        }
        .bottom_box {
          width: 100%;
          height: 20px;
          span {
            line-height: 20px;
            color: red;
          }
        }
      }
      .right_box {
        flex: 1;
        display: flex;
        .right_box1 {
          width: 50%;
          height: 100%;
          text-align: center;
          img {
            width: 80%;
          }
          p {
            font-size: 12px;
            line-height: 16px;
          }
        }
      }

      .van-panel__header {
        height: 40px;
        padding: 0;
        .van-cell__title {
          span {
            font-size: 18px;
            font-weight: 500;
            line-height: 38px;
            color: rgb(34, 34, 34);
            margin-left: 8px;
          }
        }
        .van-cell__value {
          span {
            font-size: 12px;
            font-weight: 500;
            line-height: 38px;
            color: rgb(153, 153, 153);
          }
        }
      }
      .van-panel__header::after {
        border-width: 0px;
      }
      .van-hairline--top-bottom::after {
        border: none;
      }
    }
    .content_box {
      display: flex;
      .left_box {
        width: 162px;
        height: 110px;
        background-color: rgb(255, 250, 242);
        box-sizing: border-box;
        border-radius: 6px;
        border-bottom: 4px solid rgb(235, 194, 138);
      }
    }
  }
  .home_new {
    // width: 100%;
    padding: 5px;
    border-radius: 5px;
    height: 190px;
    .home_new_raise1 {
      height: 178px;
      width: 94%;
      margin-left: 12px;
      background-color: rgb(255, 255, 255);
      margin-bottom: 10px;
      border-radius: 6px;
      .home_new_title {
        height: 43px;
        // background-color: green;
        overflow: hidden;
        line-height: 43px;
        font-size: 20px;
        margin-left: 10px;
      }
      .content_box {
        height: 138px;
        // background-color: green;
        display: flex;
        overflow-x: auto;
        .content_box_item {
          min-width: 93px;
          box-sizing: border-box;
          // border: 1px solid black;
          background-color: rgb(248, 248, 248);
          text-align: center;
          margin: 0 2px;
          border-radius: 6px;
          img {
            width: 100%;
            height: 84px
          }
          span {
            font-size: 12px;
          }
        }
      }
      .content_box::-webkit-scrollbar {
        width: 0;
      }
    }
  }

  .bottom_box {
    height: 150px;
  }
}
</style>
